<style scoped lang="less">
.recommend {
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 105px);
  padding: 10px 20px;
}
</style>
<template>
  <div class="recommend" ref="recommend">
    <!--  banner -->
    <Banner />
    <!--  歌单列表  -->
    <SongList />
    <!--  独家放送   -->
    <ExclusiveBroadcast />
    <!--  最新音乐  -->
<!--    <NewMusic />-->
    <!--  推荐mv  -->
    <MV />
  </div>
  <ScrollBar :el="recommend"/>
</template>

<script lang="ts" setup>
// 模块
import Banner from '../modules/recommend/banner/index.vue'
import SongList from '../modules/recommend/songList/index.vue'
import ScrollBar from '@/components/scrollBar'
import NewMusic from '../modules/recommend/newMusic/index.vue'
import ExclusiveBroadcast from '../modules/recommend/exclusiveBroadcast/index.vue'
import MV from '../modules/recommend/mv/index.vue'

import {ref} from "vue";
const recommend = ref(null)

</script>

